<template>
  <div class="dataQuery">
    <div class="dataQuery-top">
      <span
        :class="titleChoose==i?'choosed':''"
        @click="changeChoose(i)"
        v-for="(ele,i) in titleState"
        :key="i"
      >{{ele}}</span>
    </div>
    <div class="dataQuery-filter">
      <el-date-picker
        v-model="filters.time"
        value-format="yyyy-MM-dd"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
      <el-input prefix-icon="el-icon-search" placeholder="请输入内容" v-model="filters.search"></el-input>
      <el-button round>搜索</el-button>
    </div>
    <div class="dataQuery-table">
      <CostomTable :nameData="nameData" :tableData="tableData" :operating="operating" />
    </div>
  </div>
</template>

<script>
import CostomTable from "../../components/costomTable";
export default {
  data() {
    return {
      titleState: ["业务列表", "设备列表"],
      titleChoose: 0,
      filters: {
        time: "",
        search: ""
      },
      nameData: [],
      tableData: [],
      operating: []
    };
  },
  components: {
    CostomTable
  },
  methods: {
    changeChoose(i) {
      this.titleChoose = i;
      this.tableData = [];
      if (i == 0) {
        this.nameData = [
          { label: "业务名称", property: "business" },
          { label: "业务负责人", property: "name" },
          { label: "联系电话", property: "phone" },
          { label: "行程数", property: "stroke" },
          { label: "车辆总数", property: "carNum" },
          { label: "设备总数", property: "deviceNum" },
          { label: "超限总数", property: "business" },
          { label: "开始时间", property: "startTime" },
          { label: "结束时间", property: "endTime" },
          { label: "状态", property: "state" }
        ];
      } else {
        this.nameData = [
          { label: "设备信息", property: "deviceInfo" },
          { label: "信号强度", property: "signal" },
          { label: "电量", property: "power" },
          { label: "当前版本", property: "currenVeision" },
          { label: "状态", property: "state" }
        ];
      }
      let objectData = {};
      this.nameData.filter((ele, index) => {
        let key = ele.property;
        objectData[key] = "asdass";
      });
      this.tableData.push(objectData);
      this.operating = [{ name: "查看数据" }];
    }
  },
  mounted() {
    this.changeChoose(0);
  }
};
</script>

<style lang='scss' scoped>
.dataQuery {
  &-table{
    height: 80vh;
    overflow-y: scroll;
  }
  &-filter {
    .el-button {
      background: #006ab4;
      color: #fff;
      margin-left: 0.2rem;
    }
    .el-date-editor {
      width: 2.5rem;
    }
    .el-input {
      width: 2rem;
      margin-left: 0.2rem;
    }
    background: #fff;
    margin: 0.1rem;
    padding: 0.1rem 0.2rem;
    display: flex;
  }
  &-top {
    .choosed {
      &::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 0.02rem;
        background: #0082de;
        bottom: 0;
      }
      position: relative;
      font-weight: bold;
      color: #000;
    }
    span {
      margin-right: 0.4rem;
      color: #999;
      font-size: 0.16rem;
      padding: 0.2rem 0;
    }
    background: #fff;
    margin: 0.1rem;
    padding: 0 0.2rem;
    display: flex;
  }
}
</style>